<template>
  <div class="view-wrapper">
    
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="查询" prop="nameChannelId">
          <el-input v-model="queryParams.nameChannelId" placeholder="渠道id\渠道名称" clearable />
        </el-form-item>
        <el-form-item label="渠道入口" prop="channelType">
          <el-select v-model="queryParams.channelType" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in channelTypeList" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="最后修改时间">
            <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
              placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新建渠道</el-button>
        <el-button type="primary" style="margin: 10px 0 20px" v-loading="isDown" @click="getCodeImg">导出小程序二维码</el-button>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tabList"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @cell-click="handleCellClick"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="渠道ID" prop="channelId"></el-table-column>
        <el-table-column label="渠道名称" prop="name"></el-table-column>
        <el-table-column label="渠道入口" prop="channelType"></el-table-column>
        <el-table-column label="页面" prop="cardShopName"></el-table-column>
        <el-table-column label="添加时间" prop="createTime"></el-table-column>
        <el-table-column label="最后修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="渠道H5链接" prop="h5Link"></el-table-column>
        <el-table-column label="渠道小程序短链" prop="appletLink"></el-table-column>
        <el-table-column label="状态" prop="status" >
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">启用</div>
            <div v-if="scope.row.status == 2">停用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editClick(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="cancelShow(scope.row)"  v-if="scope.row.status == 1">停用</el-button>
            <el-button size="mini" type="text" @click="cancelShow(scope.row)" v-if="scope.row.status == 2">启用</el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog :id="dialogId" :pathType='pathType' v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>

<script>
  import {
    poList,
    poCode,
    poStatus,
  } from "@/api/merchantsNFR/channelManagement";
  import Dialog from "./components/dialog";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  
  export default {
    name: "",
    components: {
      Dialog,
      ExportExcelButton
    },
    data() {
      return {
        dialogId: '',
        dialogVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        channelTypeList: [
          {id: 1,value: '首页'},
          {id: 2,value: '店铺详情页'},
          {id: 3,value: '赚卡详情页'},
          {id: 4,value: '积分集市'},
        ], //渠道入口 1 首页 2 店铺详情页 3 赚卡详情页 4 积分集市	
       
        //表格数据
        tabList: [],
        pathType: 'add',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          nameChannelId: '', //渠道id/渠道名称
          channelType: '', //渠道入口
          startTime: '', //开始时间
          endTime: '', //结束时间
        },
        imgList: [],
        ids: '',
        isDown: false,
        date: [],
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ids: this.ids,
        };
        return params;
      },
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        poList(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      getCodeImg() {
        if(!this.ids){
          this.$message.error('请选择下载渠道二维码')
          return
        }
        this.isDown = true
        var data = {
          ids: this.ids
        }
        poCode(data).then(res => {
          this.imgList = res.result
          console.log(this.imgList)
          this.isDown = false
          this.imgList.forEach(item => {
            this.downloadIamge(item.url,item.channelName)
          })
        });
      },
      //处理时间
      changeTime(e){
        this.queryParams.startTime = e[0]
        this.queryParams.endTime = e[1]
      },
      //下载图片
      downloadIamge(imgsrc, name) {
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window
        }); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = 'data:image/png;base64,'+ imgsrc; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log('val',val)
        var selList = []
        val.forEach(item => {
          selList.push(item.id)
        });
        this.ids = selList.join()
        console.log('this.ids',this.ids)
      },
      // 表单重置
      reset() {
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          nameChannelId: '', //渠道id/渠道名称
          channelType: '', //渠道入口
          startTime: '', //开始时间
          endTime: '', //结束时间
        };
        this.resetForm("queryParams");
        this.handleQuery()
      },
      handleCellClick (row, column, cell, event) {
        console.log('column.property',column.property)
        // console.log('row',row)
        if (column.property === 'h5Link') {
          console.log('row',row.h5Link)
          this.copyCenter(row.h5Link)
        }
        if (column.property === 'appletLink') {
          this.copyCenter(row.appletLink) 
        }
      },
      // 复制链接
      copyCenter(value) { //复制
        console.log(value)
        if(value==undefined||value==''){
          this.$message.error('复制失败,url地址不存在')
          return
        }
        //创建input标签
        var input = document.createElement('input')
        //将input的值设置为需要复制的内容
        input.value = value;
        //添加input标签
        document.body.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand('copy')
        //成功提示信息
        this.$message.success('复制成功')
        //移除input标签
        document.body.removeChild(input)
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
      },
      //新增
      addClick() {
        this.dialogId = null
        this.dialogVisible = true;
        this.pathType = 'add'
      },
      // 编辑
      editClick(row) {
        this.dialogId = row.id
        this.pathType = 'edit'
        console.log(this.dialogStatus)
        this.dialogVisible = true;
      },
      _handleSuccess(e) {
        //成功回调
        // this.resetQuery()
        this.getList()
      },
      cancelShow(row){
        var txt = ''
        var status = ''
        if(row.status == 1){
          txt = '是否停用'
          status = 2
        }else{
          txt = '是否启用'
          status = 1
        }
        this.$confirm(`${txt}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            id: row.id,
            status: status,
          }
          poStatus(data).then(response => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.resetQuery()
          });
        }).catch(() => {});
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }
</style>
